.container {
    height: 100%;
    overflow: hidden;
}
.btn {
    margin-left: 20px;
    position: relative;
    z-index: 1;
}
.box {
    margin: 50px auto 100px;
    width: 400px;
    height: 400px;
    font-size: 0;
}
.piece {
    display: inline-block;
    width: 5%;
    height: 5%;
    background-image: url(./images/img.jpg);
    background-size: 400px;
    opacity: 0;
}
.piece_show {
    transform: none !important;
    opacity: 1;
}
@for $i from 0 through 399 {
    $x: $i % 20;
    $y: calc(($i - $x) / 20);
    .piece:nth-child(#{$i + 1}) {
        background-position: (-$x * 20px) (-$y * 20px);
        transform: translate(-300 + random(600) + px, -300 + random(600) + px);
        transition: 1000 + random(3000) + ms;
    }
}